<template>
  <div class="mv-container">
    <img src="@/assets/images/背景06.png" class="mv-bgc">
    <!-- 左侧区域 -->
    <div class="mv-left">
      <div class="mv-title">
        <h1>{{ mvInfo.name }}</h1>
        <p><span>发布：{{ mvInfo.publishTime }}</span> <span>播放：{{ mvInfo.playCount >
            100000 ? (mvInfo.playCount / 10000).toFixed(0) + '万次' : mvInfo.playCount
        }}</span> </p>
      </div>
      <!-- 视频 -->
      <video :src="mvUrl" controls autoplay class="mv-video">
      </video>
      <div class="btns">
        <el-button plain round size="small"><span class="iconfont icon-dianzan"></span>赞({{ mvDetail.likedCount }})
        </el-button>
        <el-button v-if="!mvDetail.liked" plain round size="small" icon="el-icon-folder-add" @click="subThisMv(1)">收藏({{
            mvDetail.likedCount
        }})
        </el-button>
        <el-button v-else plain round size="small" icon="el-icon-folder-checked" @click="subThisMv(2)">已收藏({{
            mvDetail.likedCount
        }})
        </el-button>
        <el-button plain round size="small" icon="el-icon-share">分享({{ mvInfo.shareCount }})</el-button>
        <el-button plain round size="small"><span class="iconfont icon-xiazai"></span>下载MV</el-button>
      </div>

      <!-- 评论区域 -->
      <div class="comment-box">
        <!-- 评论框区域 -->
        <div class="comment-text">
          <textarea class="text" v-model="contentList"></textarea>
          <button class="comment-btn" @click="goComment">评论</button>
        </div>

        <!-- 评论列表区域 -->
        <div class="comment-list">
          <h4>全部评论({{ total }})</h4>
          <div class="conment-item" v-for="item in mvComments" :key="item.commentId">
            <img class="useravatar" :src="item.user.avatarUrl"
              @click="$router.push('/userprofiles/' + item.user.userId)">
            <div class="content">
              <div class="list">
                <p><span @click="$router.push('/userprofiles/' + item.user.userId)">{{ item.user.nickname
                }}：</span>{{ item.content }}</p>
              </div>
              <div v-if="item.beReplied.length > 0" class="answer"><span
                  @click="$router.push('/userprofiles/' + item.beReplied[0].user.userId)" class="userNickname">@{{
                      item.beReplied[0].user.nickname
                  }}：</span>
                <span>{{ item.beReplied[0].content }}</span>
              </div>
              <span class="time">{{ item.timeStr }}</span>
            </div>
            <div class="content-btn">
              <span :class="{ 'iconfont': true, 'icon-dianzan': true, 'active': item.liked }" @click="dianzan(item)"><i
                  v-show="item.likedCount">{{ item.likedCount }}</i></span>
              <span class="iconfont icon-pinglun" @click="pinglun(item)"></span>
            </div>
          </div>
          <!-- 分页器区域 -->
          <div class="fenye" v-if="total > 20">
            <el-pagination background layout="prev, pager, next" :current-page="page" :page-size="limit" :total="total"
              @current-change="handleCurrentChange">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>

    <!-- 评论区域  -->

    <!-- 右侧区域 -->
    <div class="mv-right">
      <div class="userinfo" v-if="mvInfo.artists">
        <img :src="mvInfo.artists[0].img1v1Url" @click="$router.push('/artists/' + mvInfo.artistId)">
        <p @click="$router.push('/artists/' + mvInfo.artistId)">{{ mvInfo.artists[0].name }}</p>
      </div>

      <!-- 相似Mv区域 -->
      <h3>相似Mv</h3>
      <div class="simi-mv">
        <div class="mv-item" v-for="item in simiMv" :key="item.id">
          <div class="img-mv"><img :src="item.cover" @click="$router.push('/mv/' + item.id)"></div>
          <div class="mvinfo">
            <p>{{ item.name }}</p>
            <span @click="$router.push('/artists/' + item.artists[0].id)">{{ item.artists[0].name }}</span>
            <span>{{ item.playCount > 10000 ? (item.playCount / 10000).toFixed(1) + '万 ' : item.playCount }} 播放</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from '@/request/request'
export default {
  data() {
    return {
      mvInfo: {},
      mvUrl: '',
      mvDetail: {},
      limit: 10,
      page: 0,
      mvComments: [],
      total: 0,
      contentList: '',
      t: 1,
      commentId: 0,
      simiMv: []
    }
  },
  watch: {
    $route(val) {
      const id = val.params.id
      this.getMvInfo(id)
      this.getMvUrl(id)
      this.getMvComments(id)
      this.getMvDetail(id)
      this.getSimiMv(id)
    }
  },
  created() {
    const id = this.$route.params.id
    this.getMvInfo(id)
    this.getMvUrl(id)
    this.getMvComments(id)
    this.getMvDetail(id)
    this.getSimiMv(id)
  },
  methods: {
    async getMvInfo(id) {
      const { data: res } = await axios.get(`/mv/detail?mvid=${id}`)
      if (res.code == 200) {
        this.mvInfo = res.data
      }
    },
    async getMvUrl(id) {
      const { data: res } = await axios.get(`/mv/url?id=${id}`)
      if (res.code == 200) {
        this.mvUrl = res.data.url
      }
    },
    async getMvDetail(id) {
      const { data: res } = await axios.get(`/mv/detail/info?mvid=${id}`)
      if (res.code == 200) {
        this.mvDetail = res
      }
    },
    async getMvComments(id) {
      const mvId = id || this.mvInfo.id
      const { data: res } = await axios.get(`/comment/mv?id=${mvId}&limit=${this.limit}&offset=${this.page}`)
      if (res.code == 200) {
        this.mvComments = res.comments
        this.total = res.total
      }
    },
    async getSimiMv(id) {
      const { data: res } = await axios.get(`/simi/mv?mvid=${id}`)
      if (res.code == 200) {
        this.simiMv = res.mvs
      }
    },
    handleCurrentChange(page) {
      this.page = page
      this.getMvComments(this.mvInfo.id)
      window.scrollTo(0, 0)
    },
    // 点赞按钮
    async dianzan(item) {
      if (item.liked) {
        const { data: res1 } = await axios.post(`/comment/like?id=${this.mvInfo.id}&cid=${item.commentId}&t=0&type=1`)
        if (res1.code == 200) {
          this.$message.success('取消点赞成功')
          this.getMvComments()
        }
      } else {
        const { data: res2 } = await axios.post(`/comment/like?id=${this.mvInfo.id}&cid=${item.commentId}&t=1&type=1`)
        if (res2.code == 200) {
          this.$message.success('点赞成功')
          this.getMvComments()
        }
      }
    },
    // 回复按钮
    async pinglun(item) {
      this.contentList = '回复' + item.user.nickname + ': '
      this.commentId = item.commentId
    },
    // 评论按钮
    async goComment() {
      if (this.contentList.trim() == '') return this.$message.warning('请输入评论内容')
      const reg = /^回复/
      if (reg.test(this.contentList)) {
        this.t = 2
        this.url = `/comment?t=${this.t}&type=1&id=${this.mvInfo.id}&content=${this.contentList}&commentId=${this.commentId}`
      } else {
        this.t = 1
        this.url = `/comment?t=${this.t}&type=1&id=${this.mvInfo.id}&content=${this.contentList}`
      }
      const { data: res } = await axios.post(this.url)
      if (res.code == 200) {
        if ((this.t = 1)) {
          this.$message.success('评论成功!')
        } else {
          this.$message.success('回复成功!')
        }
        this.contentList = ''
        this.page = 1
        this.getMvComments()
      }
    },
    async subThisMv(t) {
      const { data: res } = await axios.post(`/mv/sub?mvid=${this.mvInfo.id}&t=${t}`)
      console.log(res);
      if (res.code == 200) {
        if (t === 1) {
          this.$message.success(res.message)
          this.mvDetail.liked = true
        } else {
          this.$message.success(res.message)
          this.mvDetail.liked = false
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
@media screen and (max-width:1364px) {
  .mv-container {
    width: 100% !important;
  }
}

.mv-container {
  display: flex;
  padding: 10px;
  padding-top: 20px;
  margin: 0 auto;
  margin-top: 3.7%;
  width: 70%;
  // background-color: rgb(245, 245, 245);
  cursor: default;
  background-color: #fff;

  .mv-bgc {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }

  .mv-left {
    width: 75%;
    // background-color: #fff;

    .mv-title {
      text-align: start;

      h1 {
        margin: 0;
        font-size: 20px;
      }

      p {
        margin: 0;
        font-size: 15px;
        color: rgb(189, 189, 189);
        margin-top: 5px;

        span {
          margin-right: 20px;
        }
      }
    }

    .mv-video {
      width: 100%;
      height: 536px;
      object-fit: cover;
      margin-top: 20px;
    }

    .btns {
      display: flex;
      align-items: center;
      text-align: start;
      margin-top: 10px;

      .el-button {
        display: flex;
        align-items: center;
      }

      .icon-dianzan {
        display: inline-block;
        font-size: 18px;
        margin-right: 3px;
        transform: translateY(1px);
      }

      /deep/ .el-icon-folder-add,
      /deep/ .el-icon-folder-checked {
        font-size: 20px;
        margin-right: 3px;
        // transform: translateY(2px);
      }

      /deep/ .el-icon-share {
        font-size: 18px;
        margin-right: 3px;
        transform: translateY(-1px);

      }

      .icon-xiazai {
        display: inline-block;
        font-size: 17px;
        margin-right: 3px;
        transform: translateY(1px);
      }
    }

    .comment-box {
      padding: 10px 0;
      padding-bottom: 50px;
      width: 100%;
      cursor: default;

      .fenye {
        position: absolute;
        bottom: -50px;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 20px !important;
      }

      .comment-text {
        display: flex;
        position: relative;
        justify-content: center;
        width: 100%;
        height: 130px;

        .text {
          width: 100%;
          height: 70px;
          outline: none;
          border: 1px solid rgb(199, 199, 199);
          border-radius: 5px;
          resize: none;
          font-size: 14px;
        }

        .comment-btn {
          position: absolute;
          right: 0;
          bottom: 10px;
          height: 30px;
          padding: 0 20px;
          border-radius: 15px;
          background-color: #fff;
          border: 1px solid rgb(199, 199, 199);
        }
      }

      .comment-list {
        position: relative;
        text-align: start;

        h4 {
          margin: 0;
          font-size: 15px;
        }

        .conment-item {
          display: flex;
          position: relative;
          width: 100%;
          margin-top: 10px;
          padding: 15px 0;
          border-bottom: 1px solid rgb(227, 227, 227);
          font-size: 13px;

          .content-btn {
            display: flex;
            align-items: center;
            position: absolute;
            right: 10px;
            bottom: 5px;
            text-align: center;

            .icon-pinglun {
              font-size: 16px;

              &:hover {
                font-weight: 700;
              }
            }

            .icon-dianzan {
              font-size: 21px;
              margin-right: 10px;
              padding: 0 10px;
              border-right: 1px solid rgb(207, 207, 207);

              i {
                font-style: normal;
                font-size: 14px;
                color: rgb(163, 163, 163);
              }

              &:hover {
                font-weight: 700;
              }

              &.active {
                color: #c00000;
                font-weight: 700;
              }
            }
          }

          .useravatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            margin-right: 20px;
            // background-color: pink;
          }

          .content {
            display: flex;
            flex-direction: column;

            .list {
              margin-bottom: 10px;

              p {
                margin: 0;
                word-break: break-all;
                word-wrap: break-word;

                span {
                  color: #4680d1;
                  font-size: 16px;
                }
              }
            }

            span {
              color: rgb(95, 95, 95);
            }

            .answer {
              background-color: rgb(228, 228, 228);
              margin: 0;
              padding: 5px;
              margin-left: 10px;
              margin-bottom: 10px;
              border-radius: 4px;
              word-break: break-all;
              word-wrap: break-word;

              span {
                color: rgb(56, 56, 56);
              }

              .userNickname {
                color: #4680d1;
                font-size: 14px;
              }
            }
          }
        }
      }
    }

    /deep/ .el-button {
      height: 36px;
      line-height: 36px;
      padding-top: 0;
      padding-bottom: 0;
    }
  }

  .mv-right {
    box-sizing: border-box;
    width: 30%;
    padding-left: 30px;

    .userinfo {
      display: flex;
      align-items: center;
      width: 100%;

      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 10px;
      }
    }

    h3 {
      text-align: start;
    }

    .simi-mv {
      width: 100%;
      margin-top: 20px;

      .mv-item {
        display: flex;
        width: 100%;
        height: 90px;
        margin-bottom: 20px;

        .img-mv {
          width: 170px;
          height: 90px;
          overflow: hidden;
          margin-right: 10px;
        }

        img {
          width: 170px;
          height: 90px;
          border-radius: 2px;
          overflow: hidden;
          transition: all 0.5s;

          &:hover {
            transform: scale(1.2);
          }
        }

        .mvinfo {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          text-align: start;

          p {
            // flex: 1;
            height: 50%;
            margin: 0;
            font-size: 15px;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 3.设置盒子属性为-webkit-box  必须的 */
            display: -webkit-box;
            /* 4.-webkit-line-clamp 设置为2，表示超出2行的部分显示省略号，如果设置为3，那么就是超出3行部分显示省略号 */
            -webkit-line-clamp: 2;
            /* 5.字面意思：单词破坏：破坏英文单词的整体性，在英文单词还没有在一行完全展示时就换行  即一个单词可能会被分成两行展示 */
            word-break: break-all;
            /* 6.盒子实现多行显示的必要条件，文字是垂直展示，即文字是多行展示的情况下使用 */
            -webkit-box-orient: vertical;
          }

          span {
            font-size: 13px;
            color: rgb(185, 185, 185);
          }
        }
      }
    }
  }
}
</style>